<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="序号" width="100"> </el-table-column>
      <el-table-column prop="usename" label="被投资企业" width="200">
      </el-table-column>
      <el-table-column
        prop="address"
        label="被投资企业法定代表人/负责人"
        width="220"
      >
      </el-table-column>
      <el-table-column prop="time" label="被投资日期" width="200" sortable>
      </el-table-column>
      <el-table-column prop="proportion" label="投资比例" width="150">
      </el-table-column>
      <el-table-column prop="paid" label="认缴金额" width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="text" size="small" @click="detail"> 详情 </el-button>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
      <div id="myDisk" :style="{ width: '600px', height: '300px' }"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //假数据
      tableData: [
        {
          date: '1',
          usename: '上海千服企业管理有限公司',
          address: '王小虎',
          time: '2022-01-01',
          proportion: '100%',
          paid: '1000',
          status: '续存',
        },
        {
          date: '2',
          usename: '上海千服企业管理有限公司',
          address: '王小虎',
          time: '2022-01-02',
          proportion: '90%',
          paid: '900',
          status: '续存',
        },
        {
          date: '3',
          usename: '上海千服企业管理有限公司',
          address: '王小虎',
          time: '2022-01-03',
          proportion: '80%',
          paid: '800',
          status: '续存',
        },
        {
          date: '4',
          usename: '上海千服企业管理有限公司',
          address: '王小虎',
          time: '2022-01-04',
          proportion: '70%',
          paid: '700',
          status: '续存',
        },
      ],
      //弹框状态
      dialogVisible: false,
    }
  },
  methods: {
    //详情按钮
    detail() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.drawLine(), this.disk()
      })
    },
    // x
    handleClose() {
      this.dialogVisible = false
    },
    //柱状+折线
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '柱状图+折现图' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {
          type: 'value',
          name: '销售数量',
        },
        series: [
          {
            name: '销量',
            type: 'bar', //柱
            data: [5, 20, 36, 10, 10, 20],
            //更改颜色
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#c23531',
                    '#2f4554',
                    '#61a0a8',
                    '#d48265',
                    '#91c7ae',
                    '#749f83',
                    '#ca8622',
                  ]
                  return colorList[params.dataIndex]
                },
              },
            },
          },
          {
            name: '销量',
            type: 'line', //线
            data: [5, 20, 36, 10, 10, 20],
            smooth: true, //开启平滑
          },
        ],
      })
    },
    //饼
    disk() {
      //获取实例
      let myDisk = this.$echarts.init(document.getElementById('myDisk'))
      // 绘制图表
      myDisk.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '-1%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false, //中间的文字，默认显示
              position: 'center', //hover/文字的位置
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false, //指示线
            },
            data: [
              { value: 1048, name: '1' },
              { value: 735, name: '2' },
              { value: 580, name: '3' },
              { value: 484, name: '4' },
              { value: 300, name: '5' },
            ],
          },
        ],
      })
    },
  },
}
</script>